<script setup>
// You can add additional JavaScript logic here if needed
</script>
<template>
  <div class="middle">
    <div class="characteristicBox">
      <div class="item">
        <div class="iconBox">
          <svg
            t="1734001961525"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1719"
            width="60"
            height="60"
          >
            <path
              d="M834.868967 175.034479c-7.667633 0.277316-15.22168 0.384763-22.611997 0.384763l-0.031722 0c-194.412828 0-280.05844-89.102341-280.771685-89.870844l-19.426445-21.268396-19.454074 21.268396c-0.848321 0.931209-91.220584 96.714715-303.444057 89.48608l-27.254737-0.930185L161.874249 578.027809c0 105.752556 35.307134 260.001639 340.617701 378.013403l9.508561 3.679809 9.504468-3.679809c305.310567-118.011764 340.617701-272.26187 340.617701-378.013403L862.122681 174.104293 834.868967 175.034479zM477.185588 697.779194 273.371646 517.180999l54.153364-43.88244 108.368126 79.957053c0 0 149.629879-154.797575 294.097178-227.033783l20.635993 23.245424C750.626307 349.46623 570.056766 499.102249 477.185588 697.779194z"
              fill="#2c2c2c"
              p-id="1720"
            ></path>
          </svg>
        </div>
        <div class="name">{{ $t('common.bottom1') }}</div>
      </div>
      <div class="item">
        <div class="iconBox">
          <svg
            t="1734005412363"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3187"
            width="60"
            height="60"
          >
            <path
              d="M661.333 362.667V85.333h-576v853.334h853.334v-576H661.333zM512 746.667H234.667v-64H512v64z m0-149.334H234.667v-64H512v64z m0-298.666V448H234.667V234.667H512v64z m298.667 448h-85.334v-64h85.334v64z m0-149.334h-85.334v-64h85.334v64z"
              fill="#333333"
              p-id="3188"
            ></path>
          </svg>
        </div>
        <div class="name">{{ $t('common.bottom2') }}</div>
      </div>

      <div class="item">
        <div class="iconBox">
          <svg
            t="1734007198003"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7354"
            width="60"
            height="60"
          >
            <path
              d="M919.771429 85.942857h-804.571429c-20.114286 0-36.571429 16.457143-36.571429 36.571429v256c0 20.114286 16.457143 36.571429 36.571429 36.571428h73.142857v475.428572c0 10.971429 5.485714 21.942857 14.628572 29.257143 7.314286 5.485714 14.628571 7.314286 21.942857 7.314285 3.657143 0 7.314286 0 10.971428-1.828571l128-38.4 144.457143 40.228571c5.485714 1.828571 12.8 1.828571 20.114286 0l144.457143-40.228571 126.171428 38.4c10.971429 3.657143 23.771429 1.828571 32.914286-5.485714s14.628571-18.285714 14.628571-29.257143v-475.428572h73.142858c20.114286 0 36.571429-16.457143 36.571428-36.571428v-256c0-20.114286-16.457143-36.571429-36.571428-36.571429z m-256 585.142857h-292.571429v-73.142857h292.571429v73.142857z m0-109.714285h-292.571429v-73.142858h292.571429v73.142858z m219.428571-219.428572h-36.571429v-73.142857c0-20.114286-16.457143-36.571429-36.571428-36.571429h-585.142857c-20.114286 0-36.571429 16.457143-36.571429 36.571429v73.142857h-36.571428v-182.857143h731.428571v182.857143z"
              fill="#000000"
              p-id="7355"
            ></path>
          </svg>
        </div>
        <div class="name">{{ $t('common.bottom3') }}</div>
      </div>

      <div class="item">
        <div class="iconBox">
          <svg
            t="1734005475032"
            class="icon"
            viewBox="0 0 1072 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6276"
            width="60"
            height="60"
          >
            <path
              d="M820.437462 89.922256H250.586103L40.217523 385.469486l496.222356 583.669688 496.016113-583.669688L820.437462 89.922256z"
              fill="#070001"
              p-id="6277"
            ></path>
            <path
              d="M390.831823 412.281168h268.116817v20.624371h-268.116817z"
              fill="#FFFFFF"
              p-id="6278"
            ></path>
          </svg>
        </div>
        <div class="name">{{ $t('common.bottom4') }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.characteristicBox {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  padding-bottom: 50px;
  width: 70%;
  margin-left: 15%;
  text-align: center;
  .item {
    .iconBox {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      border-radius: 100px;
      margin: 0 auto;
    }

    .icon {
      margin-top: 20px;
    }

    .name {
      margin-top: 20px;
    }
  }
}
</style>
